<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
  .charts-space {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
  }

  .user-card {
    width: 100%;
    height: 240px;
    background-color: white;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
  }

  .user-header {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .user-left {
    display: flex;
    align-items: center;
  }

  .user-left .avatar {
    width: 60px;
    border-radius: 50%;
    margin-left: 40px;
  }

  .user-left .nickname {
    margin-left: 20px;
    font-size: 24px;
    font-weight: bolder;
  }

  .detail-item {
    width: 100px;

    .num {
      font-size: 24px;
      font-weight: bolder;
      margin-bottom: 10px;
    }

    .num span {
      font-size: 16px;
      font-weight: normal;
    }

    .text {
      font-size: 16px;
      color: #6c6a6a;
    }
  }

  .user-bottom {
    height: 50%;
    display: flex;
    flex-wrap: wrap;
  }

  .bottom-item {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .bottom-item .num {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 10px;
  }

  .bottom-item .num span {
    font-size: 16px;
    font-weight: normal;
  }

  .bottom-item .text {
    font-size: 16px;
    color: #6c6a6a;
  }

  .charts-list {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    padding: 30px 25px;
  }

  .table-header {
    color: #6c6a6a;
    background-color: #e8e6e6;
    padding: 10px 20px;
  }

  .header-card {
    display: flex;
    flex-wrap: wrap;
  }

  .body-card {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
  }

  .table-chart-td {
    width: 10%;
  }

  .table-id-td {
    width: 30%;
  }

  .table-td {
    width: 20%;
  }

  .page {
    display: flex;
    justify-content: center;
  }

  .page-control {
    display: flex;
    justify-content: center;
    font-size: 14px;
  }

  .page-control span {
    margin-top: 4px;
  }

  .page-arrow {
    margin-top: 6px;
    width: 16px;
    height: 16px;
  }

  .page-arrow:hover {
    cursor: pointer;
  }

  .page-total {
    margin-left: 20px;
  }
</style>

<div class="charts-space">
  <div class="user-card">
    <div class="user-header">
      <div class="user-left">
        <img class="avatar" src="${user_key.avatar}" alt="个人头像">
        <span class="nickname">${user_key.nickname}</span>
      </div>
      <div class="user-right">
        <div class="detail-item">
          <div class="num"><span>第 </span>1
            <span>名</span>
          </div>
          <div class="text">当前排名</div>
        </div>
      </div>
    </div>
    <div class="user-bottom">
      <div class="bottom-item">
        <div class="num">0
          <span>分</span>
        </div>
        <div class="text">个人积分</div>
      </div>
      <div class="bottom-item">
        <div class="num">1
          <span>次</span>
        </div>
        <div class="text">考试完成度</div>
      </div>
      <div class="bottom-item">
        <div class="num">1
          <span>/3</span>
        </div>
        <div class="text">资料完成度</div>
      </div>
      <div class="bottom-item">
        <div class="num">1
          <span>条</span>
        </div>
        <div class="text">评论数</div>
      </div>
    </div>
  </div>
  <div class="charts-list">
    <div class="table-header">
      <div class="header-card">
        <div class="table-chart-td">排名</div>
        <div class="table-id-td">学号</div>
        <div class="table-td">积分</div>
        <div class="table-td">考试完成度</div>
        <div class="table-td">资料完成度</div>
      </div>
    </div>
    <div class="table-container">
      <div class="body-card">
        <div class="table-chart-td">1</div>
        <div class="table-id-td">22201527</div>
        <div class="table-td">0</div>
        <div class="table-td">1</div>
        <div class="table-td">1</div>
      </div>
      <div class="body-card">
        <div class="table-chart-td">2</div>
        <div class="table-id-td">22201525</div>
        <div class="table-td">0</div>
        <div class="table-td">1</div>
        <div class="table-td">1</div>
      </div>
      <div class="body-card">
        <div class="table-chart-td">3</div>
        <div class="table-id-td">22201529</div>
        <div class="table-td">0</div>
        <div class="table-td">1</div>
        <div class="table-td">1</div>
      </div>
    </div>
    <div class="page">
      <div class="page-control">
        <img src="../assets/images/箭头-左.png" alt="前进" class="page-arrow">
        <span>    1    </span>
        <img src="../assets/images/箭头-右.png" alt="后退" class="page-arrow">
        <span class="page-total">总共 1 页</span>
      </div>
    </div>
  </div>
</div>
